<template>
    <div>
        <div>
            <el-table
                    :data="words.items"
            >
                <el-table-column
                        label="净化词"
                        prop="word"
                />
                <el-table-column
                        label="发布站"
                >
                    <template slot-scope="club">
                        <admin-entity-info
                                type="club"
                                :id="club.row.club_id"
                                :name="club.row.club_name"
                                :avatar="club.row.club_icon"
                        ></admin-entity-info>
                    </template>
                </el-table-column>
                <el-table-column
                        label="分数(历史/当前)"
                >
                    <template slot-scope="club">
                        <div class="score">
                            <div class="score-items">
                                <div>
                                    历史: {{club.row.history.score === 0 ? "-" : club.row.history.score}}
                                </div>
                                <div>
                                    当前: {{club.row.now.score === 0 ? "-" : club.row.now.score}}
                                </div>
                            </div>
                            <div class="score-up">
                                <div :class="{
                                    'up':club.row.score_status === 1,
                                    'down':club.row.score_status === -1,
                                }">
                                    <span v-if="club.row.score_status === 1">
                                        +
                                    </span>

                                    <span v-if="club.row.score_status === -1">
                                        -
                                    </span>
                                    {{club.row.score_up}}
                                </div>

                            </div>
                        </div>

                    </template>
                </el-table-column>
                <el-table-column
                        label="排名(历史/当前)"
                >
                    <template slot-scope="club">
                        <div class="score">
                            <div class="score-indexes">
                                <div>
                                    历史: {{club.row.history.index === 0 ? "-" : club.row.history.index}}
                                </div>
                                <div>
                                    当前: {{club.row.now.index === 0 ? "-" : club.row.now.index}}
                                </div>
                            </div>
                            <div class="score-up">
                                <div :class="{
                                    'up':club.row.index_status === 1,
                                    'down':club.row.index_status === -1,
                                }">
                                    <span v-if="club.row.index_status === 1">
                                        +
                                    </span>

                                    <span v-if="club.row.index_status === -1">
                                        -
                                    </span>
                                    {{club.row.index_up }}
                                </div>

                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="220px"
                >
                    <template slot-scope="club">

                        <el-button type="text" size="mini" @click="onRemoveWord(club.row)">删除净化词</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>


</template>

<script lang="ts">

    import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
    import AdminEntityInfo from '../controls/AdminEntityInfo'
    import {Api} from '@/api/clean'

    @Component({
        name: "AdminStarCleanWordsView",
        components: {
            AdminEntityInfo
        }
    })
    export default class AdminStarCleanWordsView extends Vue {

        @Prop({
            type: String
        })
        value: string;

        words: Api.Stars.GetCleanWordListResponse = {
            items: []
        };

        @Watch('value')
        onValueChange(oldValue, newValue) {
            this.loadView();
        }

        onRemoveWord(row:any) {
            this.$confirm('确定要移除进化词?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                Api.Clean.RemoveCleanClubWord({
                    club_id: row.club_id,
                    word_id:row.word_id,
                    star_id:this.$route.params['id']})
                    .then((ack) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });

                        this.loadView()
                    })

            }).catch((err) => {

                console.log(err)
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }

        mounted() {
            this.loadView()
        }

        loadView() {
            Api.Clean.GetCleanWordList({star_id: this.value})
                .then((ack) => {
                    ack.items.forEach((value) => {

                        let sh = value.history.score;
                        let sn = value.now.score;

                        let xh = value.history.index;
                        let xn = value.now.index;

                        if(xn === 0) {
                            if(xh === 0) {
                                value.index_status = 0;
                                value.index_up = 0;
                            }else{
                                value.index_status = 2;
                                value.index_up = "";
                            }
                        }else {
                            if(xh === 0) {
                                value.index_status = 1;
                                value.index_up = xn;
                            }else {
                                if(xn === xh) {
                                    value.index_status = 0;
                                    value.index_up = 0;
                                }else if(xn > xh) {
                                    value.index_status = -1;
                                    value.index_up = xn - xh
                                }else {
                                    value.index_status = 1;
                                    value.index_up = xh-xn;
                                }
                            }
                        }

                        if(sn === 0) {
                            if(sh === 0) {
                                value.score_status = 0;
                                value.score_up = 0;
                            }else if(sh > 0) {
                                value.score_status = 2;
                                value.score_up = "";
                            }
                        }else{
                            if(sh === 0) {
                                value.score_status = 1;
                                value.score_up = sn;
                            }else{
                                if(sn === sh){
                                    value.score_status = 0;
                                    value.score_up = 0;
                                }else if(sn > sh) {
                                    value.score_status = 1;
                                    value.score_up = sn - sh
                                }else{
                                    value.score_status = -1;
                                    value.score_up = sh - sn;
                                }
                            }
                        }


                    });

                    this.words = ack
                })
        }


    }
</script>

<style lang="scss" scoped>
    .panel {
        padding: 5px 5px 0px 5px;
        float: right;
    }

    .score {

        display: flex;
        flex-direction: row;

        .score-items {
            min-width: 100px;
        }

        .score-indexes {
            min-width: 60px;
        }

        .split {
            padding-right: 5px;
            padding-left: 5px;

        }

        .score-up {
            padding-left: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;

            .up {
                color: #67C23A;
            }

            .down {
                color: #F56C6C;
            }
        }
    }
</style>